var cpage = 0;
function time_all_count(p) {
    showTableAndEcharts();
    stopColor();
    isFlag = true;
    cpage = p;

    time_all_count_table();

    time_all_count_echart();
}


function time_all_count_table() {
//查询数据到表格显示
    $.ajax({
        method: "POST",
        url: "timeAllCountByPage",
        data: {
            page: cpage
        },
        success: function (data) {
            $("#tip").html("<h3>各时间段统计表格</h3>");
            $("#echart-tip").html("<h3>各时间段统计图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>时间段</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th><th>总量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            $.each(jsonArr, function (index, timeCount) {
                if (index % 2 == 0) {
                    $("tbody").append("<tr class='active'><td>"+timeCount.id+"</td><td>"+timeCount.hour+"</td><td>"+timeCount.viewCount+
                        "</td><td>"+timeCount.cartCount+"</td><td>"+timeCount.parchaseCount+"</td><td>"+timeCount.totalCount+"</td></tr>")
                } else {
                    $("tbody").append("<tr class='info'><td>"+timeCount.id+"</td><td>"+timeCount.hour+"</td><td>"+timeCount.viewCount+
                        "</td><td>"+timeCount.cartCount+"</td><td>"+timeCount.parchaseCount+"</td><td>"+timeCount.totalCount+"</td></tr>")
                }
            });

            $("tbody tr").on("mouseenter", this, function() {
                color = $(this).attr("class");
                $(this).removeClass(color);
                $(this).addClass("success");
            });
            $("tbody tr").on("mouseleave", this, function() {
                $(this).removeClass("success");
                $(this).addClass(color);
            });

            //循环获取分页的页数
            var pages = 0;
            $.ajax({
                method: "POST",
                url: "getTimeCountPages",
                success: function (data) {
                    pages = data;

                    //添加分组组件
                    var page = "<tr><td colspan='6'>";
                    page += "<nav aria-label='Page navigation'>";
                    page += "<ul class='pagination'>";
                    page += "<li>";
                    if (cpage > 1) {
                        page += "<a href='javascript:time_all_count("+(cpage - 1)+")' aria-label='Previous'>";
                    } else {
                        page += "<a href='javascript:time_all_count(1)' aria-label='Previous'>"
                    }
                    page += "<span aria-hidden='true'>&laquo;</span>";
                    page += "</a>";
                    page += "</li>";


                    for (var i = 1; i<=pages; i++) {
                        if (cpage == i) {
                            page += "<li class='active'><a href='javascript:time_all_count("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                        } else {
                            page += "<li><a href='javascript:time_all_count("+i+")'>"+i+"</a></li>"
                        }
                    }


                    page += "<li>";

                    if (cpage < pages) {
                        page += "<a href='javascript:time_all_count("+(cpage+1)+")' aria-label='Next'>"
                    } else {
                        page += "<a href='javascript:time_all_count("+pages+")' aria-label='Next'>"
                    }

                    page += "<span aria-hidden='true'>&raquo;</span>";
                    page += "</a>";
                    page += "</li>";
                    page += "</ul>";
                    page += "</nav>";
                    page += "</td></tr>";
                    $("tbody").append(page);
                    $("tbody tr:last-child td").css("text-align", "center")
                }
            });
        }
    })
}

function time_all_count_echart() {
    $.ajax({
        method: "POST",
        url: "timeAllCount",
        success: function (data) {
            var jsonArr = JSON.parse(data);
            $("#dataEcharts div:gt(0)").remove();
            $("#dataEcharts").append('<div id="view" class="col-sm-6 time_count"></div>');
            $("#dataEcharts").append('<div id="cart" class="col-sm-6 time_count"></div>');
            $("#dataEcharts").append('<div id="parchase" class="col-sm-6 time_count"></div>');
            $("#dataEcharts").append('<div id="total" class="col-sm-6 time_count"></div>');

            var divs = $(".time_count");

            var datas = [];
            var viewDatas = [];
            var cartDatas = [];
            var parchaseDatas = [];
            var totalDatas = [];

            $.each(jsonArr, function (index, timeCount) {
                viewDatas.push(timeCount.viewCount);
                cartDatas.push(timeCount.cartCount);
                parchaseDatas.push(timeCount.parchaseCount);
                totalDatas.push(timeCount.totalCount);
            });
            datas.push(viewDatas);
            datas.push(cartDatas);
            datas.push(parchaseDatas);
            datas.push(totalDatas);

            for (var i = 0; i < divs.length; i++) {
                var id = $(divs[i]).attr("id");

                var name = i ==0? "浏览量": i == 1 ? "加入购物车量": i == 2? "销量": "总操作量";
                var myChart = echarts.init(document.getElementById(id));
                var option = {
                    title: {
                        show: true,
                        name: name[i],
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', "11",
                        "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: name[i],
                        data: datas[i],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };

                myChart.setOption(option);
                myChart.resize({
                    width: 500,
                    height: 400
                })
            }
        }
    });
}